<!--选择显示字段组件-->

<template>
  <div v-if="drawer">
    <el-drawer
      title="编辑显示字段"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
      :append-to-body="true"
      size="600px"
    >
      <el-button type="primary" size="small" style="margin-left:10px" @click="saveHabit()">保存习惯</el-button>
      <div class="tips">
        温馨提示：使用冻结功能后不能在表格进行拖拽，保存后需要显示最新效果，请点击[刷新]按钮
        <br />
      </div>
      <el-table :data="HeaderData.filter((v) => v.type !='null') " height="85%">
        <el-table-column property="title" label="字段名称" width="120px"></el-table-column>
        <el-table-column property="sort" label="顺序" width="150px">
          <template inline-template slot-scope="scope">
            <el-input-number
              v-model="scope.row.sort"
              controls-position="right"
              :min="1"
              :max="30"
              size="small"
              style="width:80%;"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column property="freeze" label="冻结" width="80px">
          <template inline-template slot-scope="scope">
            <el-switch
              v-model="scope.row.freeze"
              :active-value="1"
              :inactive-value="0"
              style="width:100%"
              v-show="scope.row.type != 'null'"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column property="hidden" label="显示" width="70px">
          <template inline-template slot-scope="scope">
            <el-switch
              v-model="scope.row.hidden"
              :active-value="0"
              :inactive-value="1"
              style="width:100%"
              v-show="scope.row.type != 'null'"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column property="width" label="列宽" width="150px">
          <template inline-template slot-scope="scope">
            <el-input-number
              v-model="scope.row.width"
              controls-position="right"
              :min="20"
              :max="500"
              size="small"
              style="width:80%;"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawer: false, //控制选择字段弹窗
      selectHeader: [],
      refresh: {
        actionType: "refresh",
        buttonItems: null,
        buttonKey: "RefreshCraft",
        clewMessage: null,
        color: null,
        isPDA: null,
        menuName: null,
        show: true,
        sortIndex: "0",
        title: "刷新",
        type: "refresh",
        url: null
      }
    };
  },
  props: {
    HeaderData: {
      //表头数据
      type: Array,
      default: () => {
        return [];
      }
    },
    habitUrl: {
      type: String,
      default: ""
    }
  },
  methods: {
    checkeField() {
      this.drawer = true;
    },
    handleClose() {
      this.drawer = false;
    },
    selecHeaderData() {
      this.HeaderData.map(item => {
        this.selectHeader.push({
          freeze: item.freeze,
          hidden: item.hidden,
          sort: item.sort,
          width: item.width,
          menuParamId: item.menuParamId
        });
      });
      console.log(this.habitUrl);
      // console.log(this.selectHeader);
    },
    // 保存字段习惯
    async saveHabit() {
      this.selecHeaderData();
      let { data: res } = await this.$http.post(
        "/api/" + this.habitUrl,
        this.selectHeader
      );
      if (res.result) {
        this.$message.success(res.msg);
        this.$emit("commonClick", this.refresh); //刷新页面
      }
    }
  }
};
</script>
<style scoped>
.tips {
  font-size: 15px;
  color: rgb(0, 0, 0);
}
</style>